<script setup>
	import {ref, nextTick,watch ,onMounted} from 'vue'

	const props = defineProps({
		dataList:{ type:Array, default:() => [] }
	})
	const emit = defineEmits(['focusCardChange','scroll'])

	/**
	 * 被别人通知滚动
	 */
	const scrollToId = ref(null)
	function scrollTo(id){
		scrollToId.value = id
	}

	/**
	 * 通知别人滚动
	 */
	const cardRefs = ref(null)
	const currentCardId = ref(null)
	const nodeConfigs = ref([])
	let selectQuery = null

	watch(
		() => props.dataList,
		async () => {
			await nextTick()
			const views = selectQuery.selectAll('.goods-item-card')
			let nodeConfigsTemp = []
			views.boundingClientRect(data => {
				nodeConfigsTemp =	data.map(v => ({id:v.id,top:v.top}))
			}).exec()
			const firstTop = nodeConfigsTemp[0].top
			nodeConfigsTemp.forEach(item => {item.top = item.top - firstTop})
			nodeConfigs.value = nodeConfigsTemp
			// todo:顺便初始化了分组的第一个选项的激活，但是逻辑分离到了两个组件，这不是最佳的世间
			currentCardId.value = nodeConfigsTemp[0].id
	})


	// todo: 这是他的bug还是我的bug，为什么这个变量拿不到值
	watch(currentCardId,newData => {
		// emit('focusCardChange',newData.value)
		emit('focusCardChange',currentCardId.value)
	})

	function handleScroll(e){
		const {detail} = e
		emit('scroll')
		const current = nodeConfigs.value.find((el,index,list) => {
			if(index === list.length - 1){
				return el
			}
			return detail.scrollTop >= el.top && 
						 detail.scrollTop < list[index + 1].top
		})
		currentCardId.value = current.id
	}

	onMounted(() => {
		selectQuery = uni.createSelectorQuery()
	})

	defineExpose({scrollTo})
</script>
<template>
	<view class="goods-list">
		<scroll-view 
			class="goods-scroller" 
			scroll-y 
			:show-scrollbar="false" 
			:scroll-into-view="scrollToId"
			:scroll-with-animation="true"
			@scroll="handleScroll"
	  >
			<view class="goods-item-card" v-for="item in props.dataList" :id="item.id" ref="cardRefs">
				<view class="goods-banner">
					<image src="@/static/good-banner.jpg"></image>
				</view>
				<view class="goods-title">
					<text class="title">{{ item.title}}</text>
					<text class="sub-title">{{ item.discription}}</text>
					 <!-- todo:功能暂时不开发 -->
					<!-- <view class="goods-sub-group">
						<view class="goods-sub-group-item" v-for="group in item.groups">{{ group.name }}</view>
					</view> -->
				</view>
				<LuckyGoodItem v-for="good in item.goods" :data="good"></LuckyGoodItem>
			</view>
		</scroll-view>
	</view>
</template>
<style lang="less" scoped>
	@cardBorderRadius:80rpx;
	.goods-list {
			width:100%;
			z-index:500;
		// todo:圆角效果死活实现不了
		.goods-scroller{
			height:59vh;
			z-index:500;
		}
		.goods-item-card {
			margin:0 0 10rpx;
			background-color: #fff;
			border-radius:@cardBorderRadius;
			// todo:这里加入overhidden，机会导致吸顶效果失效
			.goods-banner {
				height:100rpx;
				width:100%;
				image {
					// border-top-left-radius:@cardBorderRadius;
					// border-top-right-radius:@cardBorderRadius;
					width:100%;
					height:100%;
				}
			}
			.goods-title {
				position:sticky;
				background-color: #fff;
				padding-bottom:10rpx;
				padding-left:15rpx;
				top:0;
				display:flex;
				flex-direction: column;
				align-items: flex-start;
				z-index:999;
				.title {
				  font-size:35rpx;	
					font-weight: 700;
				}
				.sub-title {
					font-size:20rpx;
					color:#9A9A9A;
				}
				.goods-sub-group {
					margin-top:15rpx;
					display:flex;
					align-items: center;
					// overflow: scroll;	
					.goods-sub-group-item {
						@groupHeight:50rpx;
						height:@groupHeight;
						padding:0 40rpx;
						margin:0 15rpx;
						color:#666666;
						border-radius:@groupHeight / 2;
						display:flex;
						align-items: center;
						justify-content: center;
						background-color: #F6F6F6;
					}
					.sub-group-active {
						color:#0022AB;
						background-color: #EAEBF6;
					}

				}
			}
		}
	}
</style>